require("react-tap-event-plugin")();
import React, { Component, PropTypes } from 'react';
import AppBottomNavigation from '../components/appBottomNavigation';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { connect } from 'dva';
import styles from './app.css';


/**
 * App 入口文件（跟文件）
 *
 * @param children 子节点, default []
 * @returns {XML}
 * @constructor
 */
const App = (props, context) => {

  const { selectedIndex } = props.app;

  /**
   * 导航选择
   *
   * @param index
   */
  const handleSelect = (index) => {
    props.dispatch({
      type: 'app/navigationSelect',
      payload: {
        selectedIndex: index,
      }
    })

    switch (index) {
      case 0:
        context.router.push("/");
        break;
      case 1:
        context.router.push("/list");
        break;
    }
  };

  return (
    <MuiThemeProvider>
      <div className={styles.container}>

        <div className={styles.childrenContainer}>
          { props.children }
        </div>

        <AppBottomNavigation className={styles.bottomNavigation} select={handleSelect}
                             selectedIndex={selectedIndex} />
      </div>
    </MuiThemeProvider>
  );
};


App.contextTypes = {
  router: PropTypes.object,
};


function mapStateToProps({ app }) {
  return {app};
}

export default connect(mapStateToProps)(App);
